<template>
  <el-dialog title="刷卡设置" v-model="openCard" :width="is_pc == true ? '500px' : '95%'" append-to-body
             @close="cancel" :close-on-click-modal="false">
    <el-form ref="formRef" :model="formCard" :rules="rulesCard" label-width="120px">
      <el-form-item label="设备号" prop="sn">
        <span>{{ formCard.sn }}</span>
      </el-form-item>
      <el-form-item label="金额(元)" prop="amount">
        <el-input-number :min="0.01" :precision="2" v-model="formCard.amount"/>
      </el-form-item>
      <el-form-item label="时间(分钟)" prop="time">
        <el-input v-model="formCard.time" placeholder="请输入时间"/>
      </el-form-item>
      <el-form-item label="电量(度)" prop="electricity">
        <el-input-number :min="0.01" :precision="2" v-model="formCard.electricity"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {getCard, setCard} from "@/api/equipment/control";
import {ElLoading} from "element-plus";

const {proxy} = getCurrentInstance();
const openCard = ref(false)
const formCard = ref({
  devId: undefined,
  sn: undefined,
  amount: undefined,
  time: undefined,
  electricity: undefined,
})

const rulesCard = ref({
  amount: [{required: true, message: "金额不能为空", trigger: "blur"}],
  time: [{required: true, message: "时间不能为空", trigger: "blur"}],
  electricity: [
    {required: true, message: "电量不能为空", trigger: "blur"},
  ]
})

const is_pc = ref(false)

function getCollapse() {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    is_pc.value = false;
  } else {
    is_pc.value = true;
  }
}


function open(id, sn) {
  openCard.value = true;
  let loadingInstance = ElLoading.service({
    lock: true,
    body: true,
    text: "正在查询",
    background: "rgba(0, 0, 0, 0.7)",
  });
  getCard(sn)
    .then((response) => {
      loadingInstance.close();
      if (response.code == 0) {
        if (response.data) {
          formCard.value = response.data;
          formCard.value.sn = sn;
          formCard.value.devId = id;
          // 单位转换
          formCard.value.time = formCard.value.time / 60;
          formCard.value.amount = formCard.value.amount / 100;
          formCard.value.electricity = formCard.value.electricity / 3600000;
        }
      }
    })
    .catch((error) => {
      loadingInstance.close();
      formCard.value.devId = id;
      formCard.value.sn = sn;
    });
}

// 暴露出去
defineExpose({
  open,
})

function cancel() {
  openCard.value = false;
  reset();
}

function reset() {
  formCard.value = {
    devId: null,
    amount: null,
    time: null,
    electricity: null,
  };
  proxy.resetForm("formRef");
}

function submitForm() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      let loadingInstance = ElLoading.service({
        lock: true,
        body: true,
        text: "正在设置",
        background: "rgba(0, 0, 0, 0.7)",
      });
      setCard({
        sn: formCard.value.sn,
        chargeMode: formCard.value.chargeMode,
        amount: formCard.value.amount * 100,
        time: formCard.value.time * 60,
        electricity: formCard.value.electricity * 3600000,
      })
        .then((response) => {
          loadingInstance.close();
          if (response.code == 0) {
            proxy.$modal.notifySuccess("修改成功");
            cancel();
            if (reload.value) reload();
          }
        })
        .catch((error) => {
          loadingInstance.close();
        });
    }
  });
}


getCollapse();
// 页面宽度变化时
window.onresize = () => {
  getCollapse();
};

</script>

<style scoped>
.unit {
  margin-left: 10px;
}
</style>
